<template>
  <a-drawer :visible="modalVisible" title="需求详情" width="70%" @close="handleClose">
    <a-card :bordered="false">
      <detail-list title="需求信息" col="1">
        <detail-list-item term="需求标题">{{demand.demandTitle}}</detail-list-item>
        <detail-list-item term="需求分类">{{demand.categoryName}}</detail-list-item>
        <detail-list-item term="发布日期">{{demand.publishDate}}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="需求详情">
        <p class="tip" v-html="demand.demandDesc"></p>
          <div class="images" v-viewer>
            <img alt="example" width="200" height="200" v-for="file in demand.fileList" :src="file.url" />
          </div>
      </detail-list>
    </a-card>
  </a-drawer>
</template>

<script>

  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item

  export default {
    components: {
      DetailList,
      DetailListItem
    },
    data () {
      return {
        //列表初始化查询参数
        queryParam: {
          params: {
            purchaseId: ''
          }

        },
        demand: {},
        detailsList: [],
        modalVisible: false
      }
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          'processing': '进行中',
          'success': '完成',
          'failed': '失败'
        }
        return statusMap[status]
      }
    },
    methods: {
      getDetails (demandId) {
        this.http.get(this, {
          url: this.api.demand.detail,
          data: {
            handlerName: 'busDemandGetHandler',
            params: {
              demandId: demandId
            }
          },
          success: function (me, data) {
            me.demand = data
          }
        })
        this.modalVisible = true
      },
      handleClose () {
        this.modalVisible = false
      }
    },
    computed: {
      title () {
        return this.$route.meta.title
      }
    }

  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
  }
</style>
